<template>
    <el-dialog :title="title" :width="width" top="0vh" height="600px" :visible.sync="visible" class="page-dialog">
        <page-region
            v-for="(item, index) in dialogPageFrame"
            :key="index"
            :page-region-data="dialogPageData[getKey(item, index)]"
            :page-region-frame="item"
        >
            <template v-for="(index, name) in $scopedSlots" #[name]="dialogPageData">
                <slot :name="name" v-bind="dialogPageData"></slot>
            </template>
        </page-region>
    </el-dialog>
</template>
<script>
import PageRegion from './PageRegion.vue'
const SAVE_SUCCESS = 'saveSuccess'
export default {
    components: {
        PageRegion
    },
    props: {
        title: String,
        width: {
            type: String,
            default: '1200px'
        },
        dialogPageFrame: {
            type: Array,
            default: () => []
        },
        dialogPageData: {
            type: Object,
            default: () => ({})
        }
    },
    emits: [SAVE_SUCCESS],
    data() {
        return {
            visible: false
        }
    },
    methods: {
        show() {
            this.visible = true
        },
        hide() {
            this.visible = false
        },
        getKey(item, index) {
            return item.key || `region${index}`
        }
    },
    created() {
        this.dialogPageFrame
            .filter((v) => v.key && !this.dialogPageData.hasOwnProperty(v.key))
            .forEach((element, index) => {
                this.$set(this.dialogPageData, this.getKey(element, index), {})
            })
    }
}
</script>
<style lang="scss">
.page-dialog {
    overflow: auto;
    .el-descriptions__header {
        margin-bottom: 15px;
    }
    .el-descriptions__body {
        max-height: 600px;
        overflow: auto;
    }
    color: #262626 !important;
    .el-dialog__body {
        padding-bottom: 40px !important;
    }

    .el-descriptions-item__label.is-bordered-label,
    td.el-descriptions-item__content {
        color: #262626 !important;
    }
}
</style>
